<template>
	<view class="container">
		<image class="back-img" src="../../static/login.png"></image>
		
		<view class="header">
			<image class="header-img" src="../../static/me.png"></image>
			<view class="header-text">
				<view class="header-username" :style="{'margin-top' : 
		(user_id !== '') ? '20rpx' : '50rpx'}">{{account}}</view>
				<view class="header-userid" v-if="user_id != ''">账号：{{user_id}}</view>
			</view>
			<image class="header-gotoLogin" src="../../static/goto.png"></image>
		</view>
		
		<view class="utility-box">
			<view class="utility-box-title">常用功能</view>
			<view class="utility-box-line"></view>
			<view class="utility-box-items">
				<view class="utility-box-item" v-for="(item,index) in util_names" :key="index">
					<image class="utility-box-item-img" :src="'../../static/util-' + (index+1) + '.png'"  >
						<view class="utility-box-item-text">{{item}}</view>
					</image>
				</view>
			</view>
			
		</view>
		
		<view class="message-box">
			<view class="message-box-title">信息服务</view>
			<view class="message-box-line"></view>
			<view class="message-box-item" v-for="(item,index) in msg_names" :key="index">
				<view class="message-box-item-up">
					<view class="message-box-item-text">{{item}}</view>
					<view class="message-box-item-text2" >{{index >= 3? (index === 4? '版本号 ' + version : buffer+'MB') : ''}}</view>
					<image class="message-box-item-right" src="../../static/goto_2.png"></image>
				</view>
				<view class="message-box-item-down"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account : '登录',//用户名
				user_id : '',//用户ID
				util_names : ['修改密码','夜间模式','收藏','通知设置','设置'],//常用功能
				msg_names : ['公告','常见问题','我要评分','清除缓存','关于'],//信息服务
				version : '1.0',//版本号
				buffer : 0,//缓存（单位MB）
			};
		},
		methods:{
			Navigation() {
				uni.navigateTo({
					url:'/subpkg/register/register',
				})
			}
		}
	}
</script>

<style lang="scss">
.container {
	background-color: rgba(235, 236, 237, 0.4);
	height: 1450rpx;

	.back-img {
		position: absolute;
		margin-top: -100px;
		width: 100%;
		height: 550rpx;
	}
	
	.header {
		position: absolute;
		margin-top: 100rpx;
		margin-left: 40rpx;
		width: 600rpx;
		display: flex;
		justify-items: center;
		
		.header-img{
			width: 80px;
			height: 80px;
		}
		
		.header-text {
			display: block;
			margin-left: 40rpx;
			
			.header-username {
				font-size: 18px;
				font-weight: 500;
			}
			
			.header-userid{
				margin-top: 30rpx;
				font-size: 14px;
			}
		}
		
		.header-gotoLogin {
			position: absolute;
			right: 0rpx;
			top: 70rpx;
			width: 10px;
			height: 12px;
		}
	}
	
	.utility-box {
		position: absolute;
		margin-top: 370rpx;
		margin-left: 40rpx;
		background-color: white;
		width: 660rpx;
		height: 420rpx;
		border-radius: 7px;
		
		.utility-box-title {
			margin-top : 15px;
			margin-left : 17px;
			font-size: 16px;
			font-weight: bold;
		}
		
		.utility-box-line {
			margin-top : 10px;
			margin-left : 17px;
			height: 1px;
			width: 600rpx;
			background-color: #F2F5F5;
		}
		
		.utility-box-items {
			display: flex;
			flex-wrap: wrap;
			
			.utility-box-item {
				margin-top : 20px;
				margin-left : 20rpx;
				margin-right:  20rpx;
				width: 60px;
				height: 50px;
				text-align: center;
				
				.utility-box-item-img {
					width: 30px;
					height: 30px;
				}
				
				.utility-box-item-text {
					font-size: 13px;
				}
			}
		}
	}
	
	.message-box {
		position: absolute;
		margin-top: 830rpx;
		margin-left: 40rpx;
		background-color: white;
		width: 660rpx;
		height: 500rpx;
		border-radius: 7px;
		
		.message-box-title {
			margin-top : 15px;
			margin-left : 17px;
			font-size: 16px;
			font-weight: bold;
		}
		
		.message-box-line {
			margin-top : 12px;
			margin-left : 17px;
			height: 1px;
			width: 600rpx;
			background-color: #F2F5F5;
		}
		
		.message-box-item {
			
			.message-box-item-up {
				display: flex;
				text-align: center;
				margin-top : 10px;
				margin-left : 20px;
				margin-bottom: 10px;
				font-size: 13px;
				
				.message-box-item-text {
					
				}
				
				.message-box-item-text2 {
					position: absolute;
					margin-left: 380rpx;
					width: 150rpx;
					text-align: right;
					color:rgba(180, 194, 194, 1);
				}
				
				.message-box-item-right {
					position: absolute;
					margin-top : 5px;
					margin-left: 580rpx;
					width: 10px;
					height: 12px;
					
				}
			}
			
			.message-box-item-down {
				margin-left : 17px;
				height: 1px;
				width: 600rpx;
				background-color: #F2F5F5;
			}
		}
	}
}
</style>
